<?php
session_start();
include_once "checkLogin.php";
?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="css/menu.css" rel="stylesheet" type="text/css"/>
    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="js/nav.js" type="text/javascript"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="js/TweenMax.min.js"></script>
    <link href="css/word.css" rel="stylesheet" type="text/css"/>
    <title>图书档案查询</title>
    <style>
        #content #imgs {
            width: 5%;
            position: relative;
            left: 3%;
        }

        #content #dangan {
            position: relative;
            left: 4%;
            bottom: -8px;
            box-shadow: -4px -4px 10px #9db7c8;
            font-size: 22px;
            font-weight: 100;
        }

        #content thead tr {
            background-color: #E2F5F7;
        }

        #content thead th {
            color: black;
            font-weight: bold;
            border-right: 2px solid white;
            text-align: center;
        }

        .layui-fluid {
            width: 87%;
        }

        #search img {
            margin-top: 0;
            margin-left: -4px;
            width: 100%;
            height: 53px;
            border: 2px solid #dddddd;
        }

        span b {
            position: relative;
            top: 15px;
            left: 5px;
            font-size: 1.3em;
            font-weight: normal;
        }

        table td {
            color: black;
        }

        tbody td a {
            font-size: 1.1em;
            color: skyblue;
            cursor: pointer;
        }
    </style>
</head>
<body>
<canvas id="Mycanvas" style="position: absolute;left: 0%;width: 100%;height: 99%"></canvas>
<div id="main">
    <header>
        <div id="header1">
            <div id="a"></div>
            <img src="img/logo1.png">
            <h2 class="letter-wrap"  data-stagger="-0.015">清华大学图书馆管理系统</h2>
            <span>当前登录用户：<?php echo $_SESSION['admin']?></span>
        </div>
    </header>
    <div class="navmain">
        <div id="time"><span></span></div>
        <ul id="nav_all">
            <li><a href="index.php">首页</a></li>
            <?php
            include_once "conn.php";
            $main = new main();
            $info = $main->checkAdmin($_SESSION['admin']);
            if ($info['system']){
                ?>
                <li><a href="#">系统设置</a>
                    <ul style="display: none;">
                        <li><a href="library.php">图书馆信息</a></li>
                        <li><a href="admin.php">管理员设置</a></li>
                        <li><a href="#">参数设置</a></li>
                        <li><a href="shujia.php">书架设置</a></li>
                    </ul>
                </li>
                <?php
            }
            if ($info['readerset']){
                ?>
                <li><a href="#">读者管理</a>
                    <ul style="display: none;">
                        <li><a href="readertype.php">读者类型管理</a></li>
                        <li><a href="user.php">读者档案管理</a></li>
                    </ul>
                </li>
                <?php
            }
            if ($info['bookset']){
                ?>
                <li><a href="tushudangan.php">图书档案管理</a></li>
                <?php
            }
            if ($info['book']){
                ?>
                <li><a>图书借还</a>
                    <ul style="display: none;">
                        <li><a href="bookjieyue.php">图书借阅</a></li>
                        <li><a href="bookxujie.php">图书续借</a></li>
                        <li><a href="bookback.php">图书归还</a></li>
                    </ul>
                </li>
                <?php
            }
            if ($info['syschaxun']){
                ?>
                <li> <a>系统查询</a>
                    <ul style="display: none;">
                        <li><a href="tushudanganchaxun.php">图书档案查询</a></li>
                        <li><a href="jieyuechaxun.php">图书借阅查询</a></li>
                        <li><a href="jieyue.php">借阅到期提醒</a></li>
                    </ul>
                </li>
                <?php
            }
            ?>
            <li>
                <a href="pw.php">更改口令</a>
            </li>
            <li><a href="zhuxiao.php">注销</a> </li>
        </ul>
    </div>
    <div id="b"></div>
    <img id="null" src="img/null.png" style="position: absolute;top: 42%;left:40%;display: none" >
    <img id="load" src="img/loding.gif" style="position: absolute;top: 42%;left:38%;display: none">
    <div id="c">
        <div id="content">
            <img id="imgs" src="img/book.png">
            <span id="dangan">图书档案查询</span>

            <div id="text"><i>Dang An Cha Xun</i></div>
            <hr class="layui-bg-green">
            <div id="search">
                <div class="layui-fluid">
                    <div class="layui-row">
                        <div class="layui-col-md1">
                            <img src="img/search.gif">
                        </div>
                        <div class="layui-col-md11" style="background:#9ecfee; border: 2px solid #dddddd;">
                            <div class="layui-row">
                                <div class="layui-col-md2">
                                    <span><b>请选择查询依据:</b></span>
                                </div>
                                <div class="layui-form">
                                    <div class="layui-col-md2" style="position: relative;left: -5px;top: 8px;">
                                        <div class="layui-input-inline">
                                            <select name="search" lay-verify="required">
                                                <option value="0">条形码</option>
                                                <option value="1">类别</option>
                                                <option value="2" selected>书名</option>
                                                <option value="3">作者</option>
                                                <option value="4">出版社</option>
                                                <option value="5">书架</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-col-md5" style="position: relative;left:1%;top: 8px;">
                                        <div class="layui-input-inline">
                                            <input style="width: 220%" type="text" name="title" required
                                                   lay-verify="required" placeholder="请输入内容" autocomplete="off"
                                                   class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-col-md2 layui-col-lg-offset1"
                                         style="position: relative;top: 8px;left: -10px">
                                        <div class="layui-form-item">
                                            <div class="layui-input-inline">
                                                <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <table class="layui-table" lay-even lay-skin="nob">
                    <colgroup>
                        <col width="150">
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>条形码</th>
                        <th>图书名称</th>
                        <th>图书类型</th>
                        <th>出版社</th>
                        <th>书架</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <footer>
        <hr id="one">
        <hr id="two">
        CopyRight © 2019 www.cdp.cn.com 清华大学图书馆
    </footer>
</div>
</body>
<script src="layui/layui.js"></script>
<script src="js/bg.js"></script>
<script src="js/logo.js"></script>
<script>
    //一般直接写在一个js文件中
    layui.use(['layer', 'form'], function () {
        var layer = layui.layer
            , form = layui.form;
        form.on('submit(formDemo)', function (data) {
            console.log(data.field); //当前容器的全部表单字段，名值对形式：{name: value}
            a = data.field.title;
            $.ajax({
                type: "POST",
                url: "getdangan.php",
                data: {
                    id: data.field.search,
                    value: data.field.title
                },
                dataType: 'JSON',
                cache: false, //不缓存此页面
                beforeSend: function () {
                    $("#load").css('display', 'block');
                },
                success: function (data) {
                    console.log(a);
                    $("#load").css('display', 'none');
                    console.log(data);
                    if (data.length === 0) {
                        $("#null").css('display', 'block');
                    } else {
                        $("#null").css('display', 'none');
                    }
                    document.querySelector("tbody").innerHTML = '';
                    for (let i = 0; i < data.length; i++) {
                        let s =
                            `<tr>
                                    <td>${data[i]['barcode']} </td>
                                    <td>
                                        <a href="xiugaibook.php?id=${data[i]['id']}">${data[i]['bookname']}</a>
                                    </td>
                                    <td>${data[i]['type']} </td>
                                    <td>${data[i]['chuban']}</td>
                                    <td> ${data[i]['NAME']}</td>
                            </tr>`;
                        var key = s.split(a);
                        s = key.join(`<span style="color: red">${a}</span>`);
                        document.querySelector("tbody").innerHTML += s;
                    }
                }, error(a, b, c) {
                    $("#load").css('display', 'none');
                    console.log(a, b, c);
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });
</script>
</html>


